<template>

  <!--
  账户注册:先注册成功但是不能登录,需要管理审批,在给超级管理员审批,审批通过才能使用该账号
  -->
  <div id="register">
    <div id="background_register">
      <div style="font-size: 20px; color: black;margin-left: 240px">JRWY信息登记</div>
      <el-form :model="registerUser" ref="registerUser" label-width="100px">
        <el-form-item label="" prop="userName">
          <label style="color: black">用户名称:</label>
          <el-input v-model="registerUser.userName" style="width: 240px;margin-left: 20px" @blur="blurUser"></el-input>
          <span id="error_username"></span>
        </el-form-item>
        <el-form-item label="" prop="sex">
          <label style="color: black">性别:</label>
          <el-select v-model="selectSex" clearable placeholder="请选择性别" style="margin-left: 50px; width: 120px"
                     @blur="blurSex">
            <el-option
                v-for="item in optionSex"
                :key="item.SexEnglish"
                :label="item.SexName"
                :value="item.SexEnglish">
            </el-option>
          </el-select>
          <span id="error_sex"></span>
        </el-form-item>
        <el-form-item label="" prop="accoutName">
          <label style="color: black">账户名称:</label>
          <el-input v-model="registerUser.accountName" style="width: 240px;margin-left: 20px"
                    @blur="blurAccoutName"></el-input>
          <span id="error_accountName"></span>
        </el-form-item>
        <el-form-item label="" prop="password">
          <label style="color: black">密码:</label>
          <el-input v-model="registerUser.password" style="width: 240px;margin-left: 40px"
                    @blur="blurPassword"></el-input>
          <span id="error_password"></span>
        </el-form-item>
        <el-form-item label="" prop="qq_word">
          <label style="color: black">QQ号码:</label>
          <el-input v-model="registerUser.qq_word" style="width: 240px;margin-left: 22px" @blur="blurQQword"></el-input>
          <span id="error_qq"></span>
        </el-form-item>
        <el-form-item label="" prop="tel_phone">
          <label style="color: black">电话号码:</label>
          <el-input v-model="registerUser.tel_phone" style="width: 240px;margin-left: 22px" @blur="blurTel"></el-input>
          <span id="error_tel"></span>
        </el-form-item>
        <el-form-item label="" >
          <label style="color: black">个性化像:</label>
          <!-- 图片预览显示区域 -->
          <el-upload
              class="avatar-uploader"
              action="api/file/com_file"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span style="color: red;padding-left: 10px"></span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('registerUser')">注册
          </el-button>
          <el-button type="primary" style="margin-left: 47px" @click="Cannal()">取消</el-button>
          <el-button type="primary" style="margin-left: 46px" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>


</template>

<script>

import axios from "axios";
import code from "@/com_code/WorkerCode";

export default {
  name: "Register",
  components: {},
  created() {
    this.selectSex = this.optionSex[0].SexEnglish;
  },
  data() {
    return {

      errorUserName: '',
      errorAccoutName: '',
      errorPassword: '',
      errorqq_word: '',
      // isShow: false,
      registerUser: {
        tel_phone: '',
        accountName: '',
        userName: '',
        sex: '',
        password: '',
        qq_word: '',
        photo_thumbnail: ''
      },
      optionSex: [
        {SexEnglish: 'F', SexName: '男'},
        {SexEnglish: 'M', SexName: '女'}
      ],
      selectSex: '',
      imageUrl: ''
    };
  },
  methods: {
    blurUser() {
      // 获取该元素
      var error_username = document.getElementById('error_username');
      if (this.registerUser.userName === "") {
        // 设置内容
        error_username.textContent = "请输入用户名!";
        // 设置样式：红色文字和删除线
        error_username.style.color = "red";
      } else {
        error_username.textContent = "";
      }
    },
    blurSex() {
      // 获取该元素
      var error_sex = document.getElementById('error_sex');
      if (this.registerUser.userName === "") {
        // 设置内容
        error_sex.textContent = "请选择性别!";
        // 设置样式：红色文字和删除线
        error_sex.style.color = "red";
      } else {
        error_sex.textContent = "";
      }
    },
    blurAccoutName() {
      // 获取该元素
      var error_accountName = document.getElementById('error_accountName');
      if (this.registerUser.accountName === "") {
        error_accountName.textContent = "账户不能为空!";
        // 设置样式：红色文字和删除线
        error_accountName.style.color = "red";
      } else {
        error_accountName.textContent = "";
      }
    },
    blurPassword() {
      // 获取该元素
      var error_password = document.getElementById('error_password');
      if (this.registerUser.password === "") {
        error_password.textContent = "密码不能为空!";
        // 设置样式：红色文字和删除线
        error_password.style.color = "red";
      } else {
        error_password.textContent = "";
      }
    },
    blurQQword() {
      // 获取该元素
      var error_qq = document.getElementById('error_qq');
      if (this.registerUser.qq_word === "") {
        error_qq.textContent = "qq号不能为空!";
        // 设置样式：红色文字和删除线
        error_qq.style.color = "red";
      } else {
        error_qq.textContent = "";
      }
    },
    blurTel() {
      // 获取该元素
      var error_tel = document.getElementById('error_tel');
      if (this.registerUser.qq_word === "") {
        error_tel.textContent = "电话号码不能为空!";
        // 设置样式：红色文字和删除线
        error_tel.style.color = "red";
      } else {
        error_tel.textContent = "";
      }
    },
    reset() {
      this.registerUser = {
        accountName: '',
        userName: '',
        sex: '',
        password: '',
        qq_word: ''
      };
      this.$message({
        message: '重置完成!',
        type: 'success', // 设置消息类型为提示
        duration: 1000, // 设置消息显示时间为3秒，默认是2000毫秒
      });
      // alert("重置信息成功!")
    },
    submitForm() {
      if (this.registerUser.userName !== "" && this.registerUser.accountName !== "" && this.registerUser.password !== "" && this.selectSex !== "") {

        console.log(this.registerUser);
        let param = {
          name: this.registerUser.userName,
          account: this.registerUser.accountName,
          password: this.registerUser.password,
          sex: this.selectSex
        };
        if (param.password !== this.registerUser.qq_word) {
          alert('两次输入的密码不一致')
          return;
        }
        console.log("param", param);
        axios.post('api/work/RegisterEmployyee', param, false).then((res) => {
          console.log(res);
          //前端和后端定义好的标准
          if (res.data.code === code.errorExistRegister) {
            this.$message({
              message: res.data.msg,
              type: 'error', // 设置消息类型为提示
              duration: 1000, // 设置消息显示时间为3秒，默认是2000毫秒
            });
            return;
          }
          if (res.data.code === code.successRegister) {
            console.log(res.data);
            this.$message({
              message: '注册成功!',
              type: 'success', // 设置消息类型为提示
              duration: 2000, // 设置消息显示时间为3秒，默认是2000毫秒
            });
            // this.$router.push({name: 'login', query: {datetime: JSON.stringify(new Date())}})
            this.$router.push({name: 'login',})
          }
        }).catch(error => {
          console.log(error)
          return;
        })
      } else {
        if (this.registerUser.accountName === "") {
          this.errorAccoutName = "账号名不能为空!";
        }
        if (this.registerUser.userName === "") {
          this.errorUserName = "用户名称不能为空!";
        }
        if (this.registerUser.password === "") {
          this.errorPassword = "密码不能为空!";
        }
        if (this.registerUser.qq_word === "") {
          this.errorqq_word = "确认密码不能为空!";
        }
        if (this.registerUser.accountName !== "") {
          this.errorAccoutName = "";
        }
        if (this.registerUser.userName !== "") {
          this.errorUserName = "";
        }
        if (this.registerUser.password !== "") {
          this.errorPassword = "";
        }
        if (this.registerUser.qq_word !== "") {
          this.errorqq_word = "";
        }

        this.$message({
          message: '提交的数据不能为空!',
          type: 'error', // 设置消息类型为提示
          duration: 1000, // 设置消息显示时间为3秒，默认是2000毫秒
        });

      }

    },
    Cannal() {
      //编程导航
      this.$router.push({name: 'login', query: {datetime: JSON.stringify(new Date())}})
      // 刷新当前页面
      location.reload();
    },
    //api接口调用
    handleAvatarSuccess(res, file) {
      console.log("res",res);
      //上传成功
      console.log("file.raw",file.raw);
      //方式一:赋值
      // this.imageUrl = URL.createObjectURL(file.raw);
     //方式二:赋值
      this.imageUrl=res.data;
    },
    //预览
    beforeAvatarUpload(file) {

      console.log(file.type);
      const isPng = file.type === 'image/png';
      //const isJpg = file.type === 'image/jpg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      console.log("isLt2M",isLt2M);
      if (!isPng) {
        this.$message.error('上传头像图片只能是 PNG 格式!');
      }
      /*if (!isJpg) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }*/
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      //console.log("this.imageUrl",this.imageUrl);
      // return (isPng||isJpg) && isLt2M;
     /* const reader = new FileReader();
      reader.onload = (e) => {
        this.imageUrl = e.target.result;  // 将图片的base64字符串赋值给imageUrl
      };
      reader.readAsDataURL(file);  // 读取图片文件并转为base64*/

      return isPng&&isLt2M;
    }
  }
}
</script>


<style scoped>
#register {
  background-image: url('../assets/feng.jpg');
  width: 100%;
  height: 100vh;
  overflow-y: hidden; /* 禁止垂直滚动条 */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#background_register {
  margin-left: 10px;
  margin-top: 10px;
  width: 620px;
  height: 900px;
  background-color: white;
}

/*:deep(.el-input__inner) {
  //color: red;
  //font-size: 29px;
  color: black;
  border-radius: 15px;
  background-color: transparent;
  box-shadow: inset 0px 0px 10px 5px rgb(123, 123, 138);
}*/

:deep(.el-input__inner) {

  height: 30px;
}


.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  border: 1px solid red;
  width: 80px;
  height: 80px;
  display: block;
}

</style>
